import React, { Component } from "react";
import {
    Input,
  } from "element-react";
  import './input.css'
class input extends Component{
    constructor(props){
        super(props);
        this.state = {
            default:"<sh-input />",
            disable:"<sh-input disabled />",
            clear:"<sh-input clearbled />",
            value:"",
            password:"<sh-input type='password' />"
        }

    }
    // 查看代码
    lookCode(name,text){
        if(this.refs[name].style.display!='block'){
            this.refs[name].style.display = 'block'
            this.refs[text].innerHTML = ' ▲ 隐藏代码'
        }else{
            this.refs[name].style.display = 'none'
            this.refs[text].innerHTML = '▼ 查看代码'
        }   
    }
    // 绑定值
   async changeValue(key,value){
      await  this.setState({
            [key]:value.target.value
        })
        if(this.state.value.length>0){

        }
    }
    render(){
        return(
            <div className='input'>
                 <div className="content_title mt-20">
                     <div className="title_text" style={{fontSize:'24px'}}>Input 输入框</div>
                 </div>
                 <div className='text mt-10'>通过鼠标或键盘输入字符</div>
                 <div className='little_text mt-20'>默认用法</div>
                 <div className='bigCard'>
                    <div className='card mt-20'>
                        <div className='default wd-300 mt-20 mb-20'>
                            <Input ></Input>
                        </div>
                    </div>
                    <div className='inputcode mt-20 mb-20'  ref='default'>
                        <pre>
                            <code>
                                <ol>
                                    <li> <span className='import'> {this.state.default}</span></li>
                                </ol>
                            </code>
                        </pre>
                    </div>
                    <div className='footerCard' ref='defaultText' onClick={this.lookCode.bind(this,'default','defaultText')} >
                    ▼ 查看代码
                    </div>
                 </div>
                 <div className='little_text mt-60'>禁用状态</div>
                 <div className='bigCard'>
                    <div className='card mt-20'>
                        <div className='default wd-300 mt-20 mb-20'>
                            <Input disabled ></Input>
                        </div>
                    </div>
                    <div className='inputcode mt-20 mb-20'  ref='disable'>
                        <pre>
                            <code>
                                <ol>
                                    <li> <span className='import'> {this.state.disable}</span></li>
                                </ol>
                            </code>
                        </pre>
                    </div>
                    <div className='footerCard' ref='disableText' onClick={this.lookCode.bind(this,'disable','disableText')} >
                    ▼ 查看代码
                    </div>
                 </div>


                 <div className='little_text mt-60'>可清空状态</div>
                 <div className='bigCard'>
                    <div className='card mt-20'>
                        <div className='default wd-300 mt-20 mb-20'>
                            <input type='text' className='songhan-input' value={this.state.value} onChange={this.changeValue.bind(this,'value')}></input>
                            
                        </div>
                    </div>
                    <div className='inputcode mt-20 mb-20'  ref='clear'>
                        <pre>
                            <code>
                                <ol>
                                    <li> <span className='import'> {this.state.clear}</span></li>
                                </ol>
                            </code>
                        </pre>
                    </div>
                    <div className='footerCard' ref='clearText' onClick={this.lookCode.bind(this,'clear','clearText')} >
                    ▼ 查看代码
                    </div>
                 </div>
                 <div className='little_text mt-60'>密码输入框</div>
                 <div className='bigCard'>
                    <div className='card mt-20'>
                        <div className='default wd-300 mt-20 mb-20'>
                            <input type='password' className='songhan-input' ></input>
                            
                        </div>
                    </div>
                    <div className='inputcode mt-20 mb-20'  ref='password'>
                        <pre>
                            <code>
                                <ol>
                                    <li> <span className='import'> {this.state.password}</span></li>
                                </ol>
                            </code>
                        </pre>
                    </div>
                    <div className='footerCard' ref='passwordText' onClick={this.lookCode.bind(this,'password','passwordText')} >
                    ▼ 查看代码
                    </div>
                 </div>




            </div>
        )
    }
}
export default input